<script setup>
import { defineProps,computed } from 'vue';
import * as http from "node:http";

// 定义组件的props
const props = defineProps({
  jobTitle: {
    type: String,
    required: true,
  },
  salary: {
    type: String,
    required: true
  },
  tags: {
    type: Array,
    default: () => []
  },
  logo: {
    type: String,
    required: true
  },
  companyName: {
    type: String,
    required: true
  },
  companyAddress: {
    type: String,
    required: true
  }
});

</script>

<template>
  <a-card class="card-container"  :bordered="false">
    <!-- Header -->
    <div class="card-header">
      <div class="job-title">{{ jobTitle }}</div>
      <div class="salary">{{ salary }}</div>
    </div>

    <!-- Tags -->
    <a-space class="tag-container">
      <a-tag v-for="(tag, index) in tags" :key="index" class="tag">{{ tag }}</a-tag>
    </a-space>

    <!-- Footer -->
    <div class="card-footer">
      <div class="logo-container">
        <a-image :preview="false" :width="60" :src="logo" alt="Logo" class="logo"/>
      </div>
      <div class="company-info">
        <div class="company-name">{{ companyName }}</div>
        <div class="company-address">{{ companyAddress }}</div>
      </div>
    </div>
  </a-card>
</template>

<style scoped>
.card-container {
  width: 385px;
  padding: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.job-title {
  font-weight: bold;
}

.salary {
  text-align: right;
  font-weight: 650;
}

.tag-container {
  margin-bottom: 20px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo-container {
  width: 60px;
}

.logo {
  width: 100%;
}

.company-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 50px; /* Logo height */
}

.company-name {
  font-weight: bold;
}

.company-address {
  color: gray;
  text-align: right;
}
</style>
